<template>
  <div ref="echarts" :style="{ width: width,height: height }"></div>
</template>


<script>
import { myMixin } from '../../mixin/mixin';
export default {
  mixins: [ myMixin ],
  props: {
    width: {
      typeof: String,
    },
    height: {
      typeof: String,
    },
    titleText: {   //标题文本 - 1
      type: String,
      default: ''
    },
    opinion: {    //区域名称 - 1
      type: Array,
      default() {
        return []
      }
    },
    opinionData: {   // 区域数据 - 1
      type: Array,
      default() {
        return []
      }
    },
    x: {  // x 轴
      type: Array,
      default() {
        return []
      }
    },
  },
  watch: {
     x: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
    opinionData: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
  },
  mounted() {
    var _this = this;
		// console.log(_this.show)
    _this.$nextTick( () => {
      _this.initChart();
    })
    // window.onresize = function () {
    //   _this.charts.resize();
    // };
    window.addEventListener( 'resize' , function () {
      _this.charts.resize();
    })
  },
  methods: {
    initChart(){
      if(this.charts != null && this.charts != '' && this.charts != undefined) {
        this.charts.dispose();
      }
      this.charts = this.echarts.init(this.$refs.echarts);
      this.charts.on("click", this.eConsole);
      this.charts.setOption({
        tooltip: {
          trigger: 'axis',
        },
        // 网格
	      grid: {
          x: 40,
          y: 30,
          x2: 80,
          y2: 60,
        },
        xAxis: {   // x 轴
          type: 'category',
          boundaryGap: false,
          data: this.x
        },
        yAxis: {   // y 轴
          type: 'value',
          axisLabel: { // y轴设置为%
            show: true,
            interval: 'auto',
            // formatter: '{value}分',
          },
        },
        series: this.opinionData  // 区域数据
      })
      window.onresize = this.charts.resize;
    }
  }
}
</script>


<style scoped>

</style>
